<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission">
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="danger"
          icon="el-icon-remove-outline"
          :loading="false"
          @click="crud.enableOrDisable('DISABLE')"
          :disabled="crud.selections.length < 1"
          v-permission="permission.disable"
        >
          禁用
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-circle-check"
          :loading="false"
          :disabled="crud.selections.length < 1"
          @click="crud.enableOrDisable('ENABLE')"
          v-permission="permission.enable"
        >
          启用
        </el-button>
        <el-button
          type="primary"
          slot="right"
          class="filter-item"
          size="mini"
          @click="getcopy()"
          v-permission="permission.copy"
          :disabled="crud.selections.length !== 1"
        >
          复制
        </el-button>
      </crudOperation>
      <el-dialog
        v-dialog-drag
        style="width: 80vm"
        title="搜索"
        close-on-click-modal
        :visible.sync="crud.props.searchToggle"
        width="70%"
      >
        <el-form size="small" label-width="70px">
          <el-row :gutter="10" class="flex">
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
              <el-form-item label="领用日期">
                <div class="flex flex-row">
                  <el-date-picker
                    v-model="query.startDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="开始日期"
                  />
                  <el-date-picker
                    v-model="query.endDate"
                    align="right"
                    unlink-panels
                    class="fl1"
                    format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"
                    default-value
                    range-separator=""
                    placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="编码">
                <el-input v-model="query.code" placeholder="输入编码进行搜索" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="名称">
                <el-input v-model="query.name" placeholder="输入名称进行搜索" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="生效天数">
                <el-input
                  v-model="query.effectDayCount"
                  placeholder="输入生效天数进行搜索"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="生效金额">
                <el-input
                  v-model="query.effectAmount"
                  placeholder="输入生效金额进行搜索"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="商品品牌">
                <zSelect
                  :value.sync="query.goodsBrandIds"
                  url="api/dropDown/basGoodsBrandList"
                  style="width: 100%"
                />
                <!-- <table-select
                  :tableColumns="[
                    { prop: 'code', label: '品牌编码', width: '100' },
                    { prop: 'name', label: '品牌名称', width: '280' },
                  ]"
                  :value.sync="query.goodsBrandIds" :showName="query.goodsBrandName"
                  placeholder="请选择品牌"
                  url="/api/dropDown/basGoodsBrandList"
                ></table-select> -->
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="商品分类">
                <treeselect
                  v-model="goodsTypeIds"
                  :options="areaList"
                  placeholder="商品分类"
                  :normalizer="normalizer"
                  multiple

                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="客户分类">
                <treeselect
                  v-model="query.customerTypeIds"
                  :options="typeList"
                  placeholder="客户分类"
                  :normalizer="normalizer"
                  multiple
                  @input="(val) => getNoStr(val, 'typeList', 'customerTypeIds')"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-form-item label="客户区域">
                <treeselect
                  v-model="query.customerAreaIds"
                  :options="areaList"
                  placeholder="客户区域"
                  :normalizer="normalizer"
                  multiple
                  @input="(val) => getNoStr(val, 'areaList', 'customerAreaIds')"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <rrOperation :crud="crud" />
            </el-col> -->
          </el-row>
          <el-row class="flex flex-reverse">
            <el-button
              class="filter-item"
              size="mini"
              type="primary"
              @click="toQuery"
            >搜索</el-button
            >
            <el-button
              class="filter-item"
              plain
              size="mini"
              type="primary"
              @click="crud.resetQuery"
            >重置</el-button
            >
          </el-row>
        </el-form>
      </el-dialog>
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        class="dl"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <div class="flex flex-row">
            <!-- <div class="fl1"> -->
            <el-form-item label="编码">
              <el-input v-model="form.code" disabled style="width: 120px" />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="form.name" style="width: 120px" />
            </el-form-item>
            <el-form-item label="生效天数">
              <el-input v-model="form.effectDayCount" style="width: 120px" />
            </el-form-item>
            <el-form-item label="生效金额">
              <el-input v-model="form.effectAmount" style="width: 120px" />
            </el-form-item>
            <el-form-item label="抵扣金额">
              <el-input v-model="form.deductAmount" style="width: 120px" />
            </el-form-item>
            <el-form-item label="总数量">
              <el-input v-model="form.totalCount" style="width: 120px" />
            </el-form-item>
            <el-form-item label="剩余数量">
              <el-input
                v-model="form.remainCount"
                disabled
                style="width: 120px"
              />
            </el-form-item>
            <el-form-item label="单客户最大领取数量">
              <el-input
                v-model="form.singleCustomerMaxCount"
                style="width: 120px"
              />
            </el-form-item>
            <el-form-item label="优惠券类型">
              <el-select v-model="form.type" collapse-tags  class="edit-input" placeholder="请选择优惠劵类型"
                         style="width: 100%;">
                <el-option
                  v-for="item in dict.t_active_customer_coupon_type"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="业务日期">
              <el-date-picker
                v-model="form.busDate"
                type="date"
                placeholder="选择日期"
                style="width: 320px"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否单品">
              <!-- <el-input v-model="form.isLimitCount" style="width: 320px" /> -->
              <el-select
                v-model="form.isSingleGoods"
                clearable
                class="edit-input"
                placeholder="请选择"
                style="width: 320px"
              >
                <el-option
                  v-for="(item, index) in dict.common_yes_or_no"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="领用开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 320px"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="领用结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 320px"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="是否限制领取数量">
              <!-- <el-input v-model="form.isLimitCount" style="width: 320px" /> -->
              <el-select
                v-model="form.isLimitCount"
                clearable
                class="edit-input"
                placeholder="请选择"
                style="width: 320px"
              >
                <el-option
                  v-for="(item, index) in dict.common_yes_or_no"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- </div>
          <div  class="fl1"> -->
            <el-form-item label="客户区域">
              <treeselect
                v-model="customerAreaList"
                :options="areaList"
                placeholder="客户区域"
                style="width: 320px"
                :normalizer="normalizer"
                multiple
                @input="(val) => getNoStr(val, 'areaList', 'customerAreaIds')"
              />
            </el-form-item>
            <el-form-item label="客户分类">
              <treeselect
                v-model="customerTypeList"
                :options="typeList"
                placeholder="客户分类"
                style="width: 320px"
                :normalizer="normalizer"
                multiple
                @input="(val) => getNoStr(val, 'typeList', 'customerTypeIds')"
              />
            </el-form-item>
            <el-form-item label="是否直营">
              <!-- <el-input v-model="form.isDirectSale" style="width: 320px" /> -->
              <el-select
                v-model="form.isDirectSale"
                clearable
                class="edit-input"
                placeholder="请选择"
                style="width: 320px"
              >
                <el-option
                  v-for="(item, index) in dict.common_yes_or_no"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称">
              <zSelect
                multiple
                :value.sync="form.customerIds"
                :showName="form.customerName"
                url="api/dropDown/basCustomerList"
                style="width: 100%;line-height: 1;"
              />
            </el-form-item>

            <el-form-item label="商品品牌" v-if="form.isSingleGoods!=1">
              <!-- <el-input v-model="form.goodsBrandIds" style="width: 320px" /> -->
              <zSelect
                multiple
                :value.sync="form.goodsBrandIds"
                :showName="form.goodsBrandName"
                url="api/dropDown/basGoodsBrandList"
                style="width: 320px"
              >
              </zSelect>
            </el-form-item>
            <el-form-item label="商品分类" v-if="form.isSingleGoods!=1">
              <!-- <el-input v-model="form.goodsTypeIds" style="width: 320px" /> -->
              <treeselect
                v-model="curGoodsTypeList"
                :options="goodsTypeList"
                placeholder="选择商品分类"
                :normalizer="normalizer"
                multiple
                @input="(val) => getNoStr(val, 'curGoodsTypeList', 'goodsTypeIds')"
                style="width: 320px"
              />
            </el-form-item>

            <el-form-item label="商品名称">
              <zSelect multiple :value.sync="form.goodsIds"
                       :showName="form.goodsName"
                       url="api/dropDown/basGoodsList" style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="是否启用">
              <!-- <el-input v-model="form.status" style="width: 320px" /> -->
              <el-select
                v-model="form.status"
                clearable
                class="edit-input"
                placeholder="请选择"
                style="width: 320px"
              >
                <el-option
                  v-for="(item, index) in dict.common_yes_or_no"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="公司id">
            <z-select url="/api/dropDown/childSysCompanyList" multiple :value.sync="form.companyId" style="width: 320px"/>
          </el-form-item> -->
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                style="width: 320px"
              />
            </el-form-item>
          </div>
          <!-- </div> -->
          <!-- <el-form-item label="优先级">
            <el-input v-model="form.level" style="width: 320px" />
          </el-form-item> -->
          <div v-if="form.type == '2'">
            <div>赠品</div>
            <el-button type="primary" @click="addGiftGoods">添加</el-button>
            <el-table ref="tableB" stripe border
                      :data="form.giftGoodsList"
                      size="small" style="width: 100%;"
                      :show-summary="true"
                      sortable="custom"
            >
              <el-table-column   prop="goodsCode" label="商品编码" />
              <el-table-column   prop="goodsName" label="商品名称">
                <template slot-scope="scope">
                  <jtg-select-plus  ref="productRef"
                                    v-model="scope.row.goodsId"
                                    type="1"
                                    @change="$event=>setGiftGoods($event,scope.$index)"
                                    url="productList"/>
                </template>
              </el-table-column>
              <el-table-column   label="赠送数量" >
                <template scope="scope">
                  <el-input
                    maxlength="12"
                    v-model="scope.row.boxNum"
                    style="width:50%;float: left">
                    <div slot="suffix" style="height: 100%;font-size: 15px;color: black"
                         class="flex a-item j-content">{{ scope.row.boxUnitName }}</div>
                  </el-input>
                  <el-input
                    maxlength="12"
                    v-model="scope.row.mainNum"
                    style="width:50%;float: left">
                    <div slot="suffix" style="height: 100%;font-size: 15px;color: black"
                         class="flex a-item j-content">{{ scope.row.mainUnitName }}</div>
                  </el-input>
                </template>
              </el-table-column>


            </el-table>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.cu === 2"
            type="primary"
            @click="crud.submitCU()"
          >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        stripe
        border
        v-draghead="manyTableOption"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column
          v-if="item.visible"
          v-for="(item, index) in header"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="columnLabel(item)"
          :width="item.width + 'px'"
          @header-dragend="changeColWidth"
        ><template slot-scope="{ row, $index }"
        ><span v-if="item.type == 1">{{ row[`${item.prop}`] }}</span
        ><span v-else-if="item.type == 2">{{
            parseTime(row[`${item.prop}`])
          }}</span
        ><span v-else-if="item.type == 3">{{
            getDict(`this.dict.label.${item.dictionary}[${row[item.prop]}]`)
          }}</span
        ><span v-else-if="item.type == 4"
        ><span v-if="item.prop == 'busDate'">
                <span>{{ parseTime(row.busDate) }}</span> </span
        ><span v-if="item.prop == 'startDate'">
                <span>{{ parseTime(row.startDate) }}</span> </span
        ><span v-if="item.prop == 'endDate'">
                <span>{{ parseTime(row.endDate) }}</span> </span
        ><span v-if="item.prop == 'createTime'">
                <span>{{ parseTime(row.createTime) }}</span> </span
        ><span v-if="item.prop == 'updateTime'">
                <span>{{ parseTime(row.updateTime) }}</span> </span
        ><span v-if="item.prop == 'enableTime'">
                <span>{{ parseTime(row.enableTime) }}</span> </span
        ><span v-if="item.prop == 'disableTime'">
                <span>{{ parseTime(row.disableTime) }}</span>
              </span></span
        >
        </template>
        </el-table-column>
        <el-table-column
          v-permission="[
            'admin',
            'activeCustomerCoupon:edit',
            'activeCustomerCoupon:del',
          ]"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog title="表格配置" :visible.sync="tableConfigShow" width="60%">
      <j-table-column-config :columns.sync="header" @tabSave="saveHead" />
    </el-dialog>
    <right-click-menu
      @tableConfig="tableConfig"
      :options.sync="rightClickMenuConfig"
    ></right-click-menu>
  </div>
</template>

<script>
import crudActiveCustomerCoupon from "@/api/erp/activeCustomerCoupon";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import Treeselect from "@riophae/vue-treeselect";
import { getCustomerTypeTree } from "@/api/erp/basCustomerType";
import { manyTableMixin } from "@/mixins/manyTableMixin";
// import {getAreaTree} from "@/api/erp/basCustomerArea";
// import {} from '@/api/erp/activeCustomerCoupon'
import jtgSelectPlus from '../../../components/select/JtgSelectPlus.vue'

import { getAreaTree } from "../../../api/erp/basCustomerArea";
import {getBasGoodsTypeTree} from "../../../api/erp/basGoodsType";
// crud交由presenter持有
const defaultCrud = CRUD({
  title: "客户优惠券",
  url: "api/activeCustomerCoupon",
  sort: "id,desc",
  crudMethod: { ...crudActiveCustomerCoupon },
  optShow: {
    isShow: true,
    add: true,
    edit: true,
    del: true,
    download: true,
    leadingIn: true,
    enable: true,
    disable: true,
    pass: false,
    reject: false,
    copy: false,
    downloadDetail: false,
    recover: false,
    invalid: false,
    print: false, // 打印
    printDetail: false, // 打印详情
    unAccept: false, // 反验收
    accept: false, // 验收
  },
});
const defaultForm = {
  id: null,
  code: null,
  name: null,
  type: null,
  busDate: null,
  startDate: null,
  endDate: null,
  level: null,
  effectDayCount: null,
  effectAmount: null,
  deductAmount: null,
  isLimitCount: null,
  isSingleGoods: null,
  totalCount: null,
  remainCount: null,
  singleCustomerMaxCount: null,
  customerAreaIds: null,
  customerTypeIds: null,
  isDirectSale: null,
  goodsBrandIds: null,
  goodsTypeIds: null,
  goodsIds: null,
  status: null,
  remark: null,
  createUserId: null,
  createTime: null,
  updateUserId: null,
  updateTime: null,
  enableUserId: null,
  enableTime: null,
  disableUserId: null,
  disableTime: null,
  companyId: null,
};
export default {
  name: "activeCustomerCoupon",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    Treeselect,
    jtgSelectPlus
  },
  mixins: [
    presenter(defaultCrud),
    header(),
    form(defaultForm),
    crud(),
    manyTableMixin,
  ],
  dicts: ["common_yes_or_no",'t_active_customer_coupon_type'],
  data() {
    return {
      permission: {
        add: ["admin", "activeCustomerCoupon:add"],
        edit: ["admin", "activeCustomerCoupon:edit"],
        del: ["admin", "activeCustomerCoupon:del"],
        import: ["admin", "activeCustomerCoupon:import"],
        export: ["admin", "activeCustomerCoupon:export"],
        copy: ["admin", "activeCustomerCoupon:copy"],
        upload: ["admin", "activeCustomerCoupon:upload"],
        download: ["admin", "activeCustomerCoupon:download"],
        enable: ["admin", "activeCustomerCoupon:enable"],
        disable: ["admin", "activeCustomerCoupon:disable"],
      },
      rules: {
        startDate: [
          { required: true, message: "领用开始日期不能为空", trigger: "blur" },
        ],
        endDate: [
          { required: true, message: "领用结束日期不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "优惠券类型不能为空", trigger: "blur" },
        ]
      },
      goodsTypeList:[],
      curGoodsTypeList:[],
      typeList: [],
      areaList: [],
      customerAreaList: [],
      customerTypeList: [],
      tabObj:{
        customerTypeList:'customerTypeId',
        customerAreaList:'customerAreaId',
        curGoodsTypeList:'goodsTypeId',
      }
    };
  },
  watch: {},
  created() {
    this.getTypeList();
    this.getAreaList();

  },
  mounted() {
    this.crud.props.searchToggle = false;
  },
  methods: {
    toQuery() {

      this.crud.toQuery();
      this.crud.props.searchToggle = false;

    },
    async getcopy() {
      // let res = await copy(id);

      this.form = Object.assign({}, this.crud.selections[0]);
      this.form.id = null;
      this.form.status = 0;
      this.form.code = "";
      this.form.name = "";
      this.form.remainCount = this.form.totalCount;
      this.form.createUserId = 0;
      this.form.updateTime = null;
      this.form.enableUserId = 0;
      this.form.updateTime = null;
      this.form.enableUserId = 0;
      this.form.enableTime = null;
      this.form.disableUserId = 0;
      this.form.disableTime = null;
      this.crud.form = this.form;
      this.crud.status.add = 1;
    },
    addGiftGoods(){
      this.form.giftGoodsList.push(
        {
          goodsId:null,
          goodsCode:'',
          goodsName:'',
          goodsCount:0,
          mainNum:0,
          boxNum:0,
          mainUnitName:'',
          boxUnitName:''
        }
      )
    },
    setGiftGoods(e,index){
      this.$set(this.form.giftGoodsList,index,e)
    },
    getTypeList() {
      getCustomerTypeTree({ page: 0, size: 999 }).then((res) => {
        this.typeList = res;
      });
      getBasGoodsTypeTree({ page: 0, size: 999 }).then((res) => {
        this.goodsTypeList = res.data;
      });
    },
    getAreaList() {
      getAreaTree().then((res) => {
        this.areaList = res;
      });
    },
    getTreeName(treeList, id) {
      let _this = this;
      for (let i = 0; i < treeList.length; i++) {
        let treeItem = treeList[i];
        if (treeItem.id === id) {
          return treeItem;
        } else {
          if (treeItem.children && treeItem.children.length > 0) {
            let res = _this.getTreeName(treeItem.children, id);
            if (res) {
              return res;
            }
          }
        }
      }
    },
    getNode(node, str) {
      if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
          str = this.getNode(node.children[i], str);
        }
      }
      return (str += node.id + ",");
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children == null || node.children.length === 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    getNoStr(val, type, prop) {
      let str = "";
      val.forEach((item) => {
        const itemNode = this.getTreeName(this[type], item);
        str = this.getNode(itemNode, str);
      });
      this.form[prop] = str.split(',').map(item=>{
        const data = {}
        data[this.tabObj[type]] = item
        return data
      });
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeSubmit](crud, form) {
      if(this.form.goodsBrandIds)
        this.form.goodsBrandList = this.form.goodsBrandIds.split(",").map(item=>{
          return {
            goodsBrandId:item
          }
        })
      if(this.form.customerIds)
        this.form.customerList = this.form.customerIds.split(",").map(item=>{
          return {
            customerId:item
          }
        })
      if(this.form.goodsIds)
        this.form.goodsList = this.form.goodsIds.split(",").map(item=>{
          return {
            goodsId:item
          }
        })

      // console.log('++++++++++++')
      // console.log(this.form.goodsList)
      // this.form.goodsList=[]
      // console.log(this.form.goodsList)
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.customerAreaList = [];
      this.customerTypeList = [];
      this.curGoodsTypeList = [];
      if(!form.giftGoodsList)this.$set(form,'giftGoodsList',[])
      if (form.customerAreaIds)
        this.customerAreaList = form.customerAreaIds
          .split(",")
      if (form.customerTypeIds)
        this.customerTypeList = form.customerTypeIds
          .split(",")
      if (form.goodsTypeIds)
        this.curGoodsTypeList = form.goodsTypeIds.split(",").map(item=>item>>0)


    },
  },
};
</script>

<style lang="scss" scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.dl {
  ::v-deep .el-dialog {
    width: 60vw;
  }
}
.flex {
  flex-wrap: wrap;
}
</style>
